<template>
    <div >
        <div style="background-color: white;">
            <div style="padding-top:15px;height: 50px;">
                <MldSearch
                        class="search"
                        @on-search="handleSearch(...arguments)"
                ></MldSearch>
            </div>
            <div style="height: 50px;border:1px solid rgb(244,244,244);box-sizing: border-box;
          display:inline-block;width: 100%;margin-bottom: 5px"
            >
                <el-row style="margin-top: 5px;float: right;margin-right: 20px">
                    <el-button v-if="deleteFlag" :disabled="selection.length!=1" @click="deleteFin(selection[0])">终止商机</el-button>
                    <el-button v-if="editFlag" :disabled="selection.length!=1" @click="updateFin(selection[0])">维护商机</el-button>
                    <el-button v-if="addFlag" type="primary" @click="add">新增商机</el-button>
                </el-row>
            </div>
        </div>
        <div style="height: 20px">
        </div>
        <div >
            <el-table
                    :data="tableData"
                    ref="table"
                    highlight-current-row
                    v-loading="loading"
                    @row-click="rowSelectionChange"
                    @selection-change="handleSelectionChange"
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="cnName"
                        label="客户名称"
                >
                </el-table-column>
                <el-table-column
                        prop="opptDesc"
                        label="商机描述">
                </el-table-column>
                <el-table-column
                        prop="opptType"
                        label="商机类型">
                    <template slot-scope="scope">
                        <span v-if="scope.row.opptType==='0'">招投标</span>
                        <span v-if="scope.row.opptType==='1'">单一来源</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="money"
                        label="预计金额">
                </el-table-column>
                <el-table-column
                        prop="probability"
                        label="中标概率">
                    <template slot-scope="scope">
                        <span v-if="scope.row.probability==='0'"><30%</span>
                        <span v-if="scope.row.probability==='1'">=50%</span>
                        <span v-if="scope.row.probability==='2'">>50%</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="stat"
                        label="状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.stat==='0'">合作</span>
                        <span v-if="scope.row.stat==='1'">终止</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="phone"
                        label="联系电话">
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange(...arguments)"
                    @current-change="handleCurrentChange(...arguments)"
                    :page-sizes="[10, 30, 50]"
                    :page-size="searchForm.pageSize"
                    layout="->, prev, pager, next, sizes"
                    :total="recordsCount"
            >
            </el-pagination>
        </div>
    </div>

</template>

<script>
    import MldSearch from './search'
    import {getAllCust,updateCust}from '@/api/projectApi'
    // eslint-disable-next-line no-unused-vars
    import MldAdd from './add'
    import MldUpdate from './update'
    export default {
        components: {
            MldSearch
        },
        data() {
            return {
                recordsCount: 0,
                searchForm:{
                    pageIndex:1,
                    pageSize: 10,
                },
                loading:false,
                selection:[],
                tableData: [],
                addFlag:false,
                editFlag:false,
                deleteFlag:false
            }
        },
        methods:{
            getSummaries(param){
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = '总价';
                        return;
                    }
                    if (index === 3||index===4||index===6||index===7||index===8) {
                        return;
                    }
                    const values = data.map(item => Number(item[column.property]));
                    console.log(values,1111)
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        sums[index] += '';
                    }
                });
                sums[3]=(sums[2]/sums[1]*100).toFixed(2)+'%'
                return sums;
            },
            updateFin(row){
                this.$msgBox.showDialog({
                    title: '维护客户',
                    top:'5vh',
                    content: MldUpdate,
                    width: '50%',
                    parent: this,
                    textCancel:"取消",
                    params:row
                })
            },
            deleteFin(row){
                this.$confirm('此操作将终止客户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    updateCust({custId:row.custId,stat: '1',cnName: row.cnName}).then(res=>{
                        this.getData()
                        this.$message.success("终止客户成功")
                    }).catch(e => {
                        this.$message.error({
                            message: '抱歉，删除报表信息信息遇到异常，请重试或联系管理员处理'
                        })
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                })

            },
            add(){
                this.$msgBox.showDialog({
                    title: '新增报表',
                    top:'5vh',
                    content: MldAdd,
                    width: '50%',
                    parent: this,
                    textCancel:"取消",
                })
            },
            getData(){
                this.loading=true
                getAllCust(this.searchForm).then(res=>{
                    this.tableData=res.data.data
                    this.recordsCount=res.data.recordsCount
                    this.loading=false
                }).catch(e => {
                    this.$message.error({
                        message: '抱歉，读取角色信息信息遇到异常，请重试或联系管理员处理'
                    })
                })
            },
            handleRefresh(){
                this.getData()
            },
            /**
             * 切换分页页数
             */
            handleCurrentChange (val) {
                this.searchForm.pageIndex = val
                //加载数据
                this.getData();
                this.selection = []
            },
            handleSizeChange (val) {
                this.searchForm.pageSize = val
                //加载数据
                this.getData();
                this.selection = []
            },
            rowSelectionChange (row, column) {
                this.$refs.table.toggleRowSelection(row)
            },
            handleSelectionChange(rows){
                this.selection=rows
                if (rows.length > 1) {
                    this.$refs.table.clearSelection()
                    this.$refs.table.toggleRowSelection(rows.pop())
                }
            },
            handleSearch (searchForm, vm) {
                this.searchForm = {... this.searchForm,...searchForm};
                this.getData()
            }
        },
        created() {
            this.getData()
            const tempData=JSON.parse(localStorage.getItem('buttonList'))
            if(tempData.length!==undefined&&tempData.length>0){
                tempData.forEach(it=>{
                    if(it=='4'){
                        this.addFlag=true
                    }else if(it=='5'){
                        this.editFlag=true
                    }else if(it=='6'){
                        this.deleteFlag=true
                    }
                })
            }
        }
    }
</script>

<stype scoped>
    /* 去掉全选框 */
    ::v-deep .el-table .disabledCheck .cell .el-checkbox__inner {
    display: none;
    }
</stype>
